.switch {
    // 关闭时
    color: $f-switch-off-text;
    background-color: $f-switch-off-background;

    small {
        right: calc(100% - 1.875rem);
    }

    // 选中的时候
    &.checked {
        background: $f-switch-on-bg;
    }

    &.disabled {
        background-clip: $f-switch-disabled-bg;
    }

    &.checked.disabled {
        background: $f-switch-on-disabled-bg
    }

    &.readonly {
        background: $f-switch-readonly-bg;
    }

    &.checked.readonly {
        background: $f-switch-on-readonly-bg;
    }
}

.switch {
    position: relative;
    display: inline-block;
    box-sizing: content-box;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: 0.3s ease-out all;
    white-space: nowrap;

    // 球
    small {
        border-radius: 100%;
        position: absolute;
        transition: 0.3s ease-out all;
        background: $f-switch-on-handle-bg;
        box-shadow: $f-switch-off-handle-shadow;
    }

    &.switch-small {
        @include f-switch-sizes($f-switch-sm-track-width, $f-switch-sm-track-radius, $f-switch-sm-handle-size, -2px, 0px, 0px, $f-switch-sm-font-size);
    }

    &.switch-medium {
        @include f-switch-sizes($f-switch-md-track-width, $f-switch-md-track-radius, $f-switch-md-handle-size, 2px, 2px, 2px, $f-switch-md-font-size);
    }

    &.switch-large {
        @include f-switch-sizes($f-switch-lg-track-width, $f-switch-lg-track-radius, $f-switch-lg-handle-size, 2px, 2px, 2px, $f-switch-lg-font-size);
    }

    // 选中
    &.checked {
        small {
            box-shadow: $f-switch-on-handle-shadow;
        }

        .switch-pane {
            top: 0;

            .switch-label {
                &-checked {
                    opacity: 1;
                    display: inline-block;
                }

                &-unchecked {
                    opacity: 0;
                    display: none;
                }
            }
        }
    }

    &.disabled,
    &.readonly {
        cursor: not-allowed;
    }

    // 方块
    &.square {
        border-radius: 4px;

        small {
            border-radius: 4px;
        }
    }

    // 标签文字
    .switch-pane {
        display: flex;
        flex-direction: column;
        height: 100%;
        min-height: 100%;
        justify-content: flex-start;
        align-items: center;
        top: 0;
        position: relative;
        pointer-events: none;

        >span {
            display: block;
            min-height: 100%;
        }

        .switch-label {
            &-checked {
                color: $f-switch-on-text;
                opacity: 0;
                display: none;
            }

            &-unchecked {
                opacity: 1;
                display: inline-block;
            }
        }
    }
}

.f-datagrid-cell-content {
    .switch {
        &.switch-medium {
            @include f-switch-sizes($f-switch-sm-track-width, $f-switch-sm-track-radius, $f-switch-sm-handle-size, -1px, 0px, 0px, $f-switch-sm-font-size);

            small {
                box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
            }
        }
    }
}